<template>
  <div id="practicalClassroom">
    <div class="practicalClassroomContent">
      <!-- 课程分类 -->
      <div class="practicalClassroomContentClassify">
        <div class="practicalClassroomContentClassifyTabTop">
          <ul>
            <li class="blueBack">
              <p>课程类别</p>
            </li>
            <li :class="{blueWords: index === categoryTabIndex}" v-for="(item, index) in categoryData" :key="index" @click="onTabClassify(item, index)">
              <p>{{item.label}}</p>
            </li>
          </ul>
        </div>
        <div style="width: 100%; height: 1px; background-color: #eee;"></div>
        <div class="practicalClassroomContentClassifyTabBottom">
          <ul>
            <li class="blueBack">
              <p>课程主题</p>
            </li>
            <li :class="{blueWords: themeTabIndex === -1}" @click="onTabTheme({ parent: 0 }, -1)">
              <p>全部</p>
            </li>
            <li :class="{blueWords: themeTabIndex === index}" v-for="(item, index) in themeData" :key="'theme1' + index" @click="onTabTheme(item, index)" v-show="themeParent === 0">
              <p>{{item.label}}</p>
            </li>
            <li :class="{blueWords: themeTabIndex === index}" v-for="(item, index) in themeData" :key="'theme2' + index" @click="onTabTheme(item, index)" v-show="item.parent === themeParent">
              <p>{{item.label}}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 最新课程 -->
      <div class="practicalClassroomContentCourse">
        <h2>最新课程 <span @click="jumpTo('/courseList?sceneType=newest')">查看更多</span></h2>
        <ul>
          <li v-for="(item, index) in newestCourse" :key="index" @click="jumpTo('/courseDetail?id=' + item.id)">
            <img :src="$globalImageUrl + item.courseImg" alt="">
            <div class="practicalClassroomContentCourseInfo">
              <h3 class="ellipse">{{item.courseName}}</h3>
              <p class="ellipse">{{item.introduce}}</p>
              <p class="ellipse">时长: {{item.courseDuration}}</p>
              <p style="padding-top: .1rem;"><i>￥{{item.presentPrice}}</i><b>￥{{item.originalPrice}}</b></p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 系列好课 -->
      <div class="practicalClassroomContentCourse">
        <h2>系列好课 <span @click="jumpTo('/courseList?sceneType=goodCourse')">查看更多</span></h2>
        <ul>
          <li v-for="(item, index) in seriesLesson" :key="index" @click="jumpTo('/courseDetail?id=' + item.id)">
            <img :src="$globalImageUrl + item.courseImg" alt="">
            <div class="practicalClassroomContentCourseInfo">
              <h3 class="ellipse">{{item.courseName}}</h3>
              <p class="ellipse">{{item.introduce}}</p>
              <p class="ellipse">时长: {{item.courseDuration}}</p>
              <p style="padding-top: .1rem;"><i>￥{{item.presentPrice}}</i><b>￥{{item.originalPrice}}</b></p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 低价好课 -->
      <div class="practicalClassroomContentCourse">
        <h2>低价好课 <span @click="jumpTo('/courseList?sceneType=lowPrice')">查看更多</span></h2>
        <ul>
          <li v-for="(item, index) in lowPriceLesson" :key="index" @click="jumpTo('/courseDetail?id=' + item.id)">
            <img :src="$globalImageUrl + item.courseImg" alt="">
            <div class="practicalClassroomContentCourseInfo">
              <h3 class="ellipse">{{item.courseName}}</h3>
              <p class="ellipse">{{item.introduce}}</p>
              <p class="ellipse">时长: {{item.courseDuration}}</p>
              <p style="padding-top: .1rem;"><i>￥{{item.presentPrice}}</i><b>￥{{item.originalPrice}}</b></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import practical from './practical.json'

export default {
  name: 'practicalClassroom',
  data () {
    return {
      categoryData: practical.categoryData,
      themeData: practical.themeData,
      categoryTabIndex: 0,
      themeTabIndex: -1,
      themeParent: 0,
      themeChild: 0,
      newestCourse: [],
      seriesLesson: [],
      lowPriceLesson: []
    }
  },
  created () {
    this.fetchSkillOneClassify()
    this.fetchSkillTwoClassify()
    this.fetchSkillNewCourse(this.themeParent, this.themeChild)
    this.fetchSkillGoodCourse()
    this.fetchSkillCheapCourse()
  },
  methods: {
    // 课程类别tab切换
    onTabClassify (item, index) {
      if (this.categoryTabIndex === index) {
        return
      }
      this.categoryTabIndex = index
      this.themeTabIndex = -1
      this.themeParent = item.value
      this.fetchSkillNewCourse('', '')
    },
    // 课程主题tab切换
    onTabTheme (item, index) {
      if (this.themeTabIndex === index) {
        return
      }
      this.themeTabIndex = index
      this.themeChild = item.parent
      this.fetchSkillNewCourse(this.themeParent, this.themeChild)
    },
    // 获取一级分类
    fetchSkillOneClassify () {
      this.$api.getSkillOneClassify({
      }).then(res => {
        if (res.code === 0) {
          this.categoryData = [{
            label: '全部',
            value: 0
          }]
          for (let i = 0; i < res.data.length; i++) {
            this.categoryData.push({
              label: res.data[i].classifyName,
              value: res.data[i].classifyId
            })
          }
        }
      })
    },
    // 获取二级分类
    fetchSkillTwoClassify () {
      this.$api.getSkillTwoClassify({
      }).then(res => {
        if (res.code === 0) {
          this.themeData = []
          for (let i = 0; i < res.data.length; i++) {
            this.themeData.push({
              parent: res.data[i].parentId,
              label: res.data[i].classifyName
            })
          }
        }
      })
    },
    // 最新课程
    fetchSkillNewCourse (id, childId) {
      this.$api.getSkillNewCourse({
        categoryId: id === 0 ? '' : id,
        reclassifyId: childId === 0 ? '' : childId
      }).then(res => {
        if (res.code === 0) {
          this.newestCourse = res.data
        }
      })
    },
    // 系列好课
    fetchSkillGoodCourse () {
      this.$api.getSkillGoodCourse({
      }).then(res => {
        if (res.code === 0) {
          this.seriesLesson = res.data
        }
      })
    },
    // 低价好课
    fetchSkillCheapCourse () {
      this.$api.getSkillCheapCourse({
      }).then(res => {
        if (res.code === 0) {
          this.lowPriceLesson = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#practicalClassroom{
  .practicalClassroomContent{
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    .practicalClassroomContentClassify{
      background-color: #fff;
      padding: .1rem .2rem;
      margin-bottom: .2rem;
      ul{
        padding: .1rem 0 0 0;
        font-size: 0;
        li{
          display: inline-block;
          padding: .02rem .07rem;
          border-radius: .05rem;
          margin-right: .1rem;
          margin-bottom: .1rem;
          p{
            font-weight: 500;
            font-size: .18rem;
            line-height: .26rem;
            color: inherit;
          }
        }
        li.blueBack{
          background-color: #4aa09b;
          color: #fff;
        }
        li.blueWords {
          background-color: #f6f6f6;
          color: #4aa09b;
        }
      }
      .practicalClassroomContentClassifyTabTop{
      }
      .practicalClassroomContentClassifyTabBottom{
      }
    }
    .practicalClassroomContentCourse{
      background-color: #fff;
      padding: .2rem;
      margin-bottom: .2rem;
      h2{
        font-weight: 500;
        color: #333;
        font-size: .22rem;
        height: .4rem;
        line-height: .4rem;
        margin-bottom: .2rem;
        span{
          font-weight: 500;
          color: #333;
          font-size: .16rem;
          line-height: .6rem;
          height: .5rem;
          float: right;
        }
      }
      ul{
        li:nth-child(5n){
          margin-right: 0;
        }
        li{
          display: inline-block;
          margin-right: .125rem;
          margin-bottom: .125rem;
          box-shadow: 0 0 10px #eee;
          img{
            display: inline-block;
            width: 2.22rem;
            height: 1.5rem;
          }
          .practicalClassroomContentCourseInfo{
            padding: .1rem;
          }
          h3{
            font-weight: 500;
            color: #333;
            font-size: .16rem;
            line-height: .24rem;
          }
          p{
            font-weight: 500;
            color: #666;
            font-size: .14rem;
            line-height: .22rem;
            i{
              font-weight: 500;
              color: red;
              font-size: .14rem;
              line-height: .22rem;
              font-style: normal;
            }
            b{
              text-decoration: line-through;
              font-weight: 500;
              color: #999;
              font-size: .14rem;
              line-height: .22rem;
              padding-left: .05rem;
            }
          }
        }
      }
    }
  }
}
</style>
